<template>
	<view class="box padding-30">
		<view class="bg-white padding-20 border-radio-14">
			<view class="info-confirm align-items-center">
				<view class="img-box">
					<image :src="info.service.image"> </image>
				</view>
				<view class="title color-0 fs-30">
					{{info.service.title}}
				</view>
			</view>
			<view class="solid"></view>
			<view v-if="list && list.length">
				<view v-for="(item,index) in list" :key="index" class="info-list">
					<view class="fw-b fs-30 color-0">{{item.address}}</view>
					<view class="color-4d fs-24 margin-t-10">
						{{item.name}}
						<text class="margin-l-20">{{item.contact}}</text>
					</view>
				</view>
			</view>

		</view>
		<view class="bg-white padding-20 border-radio-14 margin-t-20">
			<view class="title fs-28 color-0 fw-b margin-b-20">
				预约服务
			</view>
			<view class="fs-28 list-box justifyContent-spaceBetween">
				<text class="color-333">预约服务时间</text>
				<view class=" color-0 flex-box">
					<text>{{info.yuyue_time|| "选择预约服务时间"}}</text>
				</view>
			</view>
			<view class="fs-28 list-box justifyContent-spaceBetween">
				<text class="color-333">服务次数</text>
				<view class="num-box color-0 flex-box">
					<u-number-box v-model="info.count" :integer='true'>
						<view slot="minus" class="minus">
						</view>
						<text slot="input" style="width: 50rpx;text-align: center;" class="input">{{info.count}}</text>
						<view slot="plus" class="plus">
						</view>
					</u-number-box>
				</view>
			</view>
			<view class="fs-28 list-box justifyContent-spaceBetween">
				<text class="color-333">服务费用 </text>
				<view class=" color-0 flex-box">
					<text>￥{{(Number(info.order_amount_total) ).toFixed(2)}}</text>
				</view>
			</view>
		</view>
		<view class="margin-t-20">
			<view class="title fs-28 color-0 fw-b margin-b-20">
				备注
			</view>
			<view class="bg-white border-radio-14 padding-20">
				<view style="min-height: 100rpx;">
					{{from.remark ||'无'}}
				</view>
				<!-- <textarea name="" id="" cols="30" placeholder="请输入备注" rows="10" v-model="from.remark||'无'"
					disabled></textarea> -->
			</view>
		</view>
		<view class="pay-box bg-white justifyContent-spaceBetween">
			<view class="fs-28 color-333">
				合计：
				<text class="fs-30 fw-b color-0">￥{{(Number(info.order_amount_total) ).toFixed(2)}}</text>
			</view>
			<view class="pay-btn" @click="submitOrder">
				去支付
			</view>
		</view> 
		 
	</view>
</template>

<script>
	import {
		yizhenAdd,
		pay,
		payTest
	} from '@/api/service'
	import {
		serviceDetail,
		servicePay
	} from '@/api/order' 
	export default {
		 
		data() {
			return { 
				info: {
					service:{}
				},
				list: [],
				show: false,
				from: {
					yuyue_time: '',
					count: 1,
					remark: ''
				},
				order_no: '',
				type: '', //:1=护理,2=义诊/陪诊
				popupShow: false
			}
		},
		onLoad(e) {
			this.type = e.type
			this.order_no = e.order_no
			this.getDetail()
		},

		methods: {
		 
			 
			getDetail() {
				serviceDetail({
					order_no: this.order_no
				}).then(res => {
					this.info = res.data
					this.list = [JSON.parse(res.data.sick_json)]
				})
			}, 
			addPatient() {
				this.popupShow = true
				uni.setNavigationBarTitle({
					title: '患者信息'
				})
				// uni.navigateTo({
				// 	url:'/pageA/service/patient'
				// })
			},
			save(info) {
				this.list = [info]
				this.popupShow = false
			},
			submitOrder() {

				let that = this
				uni.showModal({
					confirmText: '支付',
					title: '提示',
					content: `确认支付${that.info.service.title}订单`,
					showCancel: true,
					success(e) {
						if (e.confirm) {
							servicePay({
								order_no: that.info.order_no
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({
										icon: 'none',
										title: '支付成功',
									})
									that.init()
								} else {
									uni.showToast({
										icon: 'none',
										title: res.msg,
									})
								}
							})
						}
					}
				})
			},
			pay(order_no) {
				pay({
					order_no
				}).then(res => {
					if (res.code == 1) {

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #F7F7F7;
	}

	.info-confirm {
		.img-box {
			width: 100rpx;
			height: 100rpx;
			min-width: 100rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.solid {
		margin-top: 20rpx;
	}

	.add-box {
		justify-content: center;
		padding: 42rpx 0;

		image {
			width: 30rpx;
			margin-right: 20rpx;
		}
	}

	.list-box {
		height: 68rpx;
		align-items: center;
	}

	.num-box {
		image {
			width: 28rpx;
			height: 28rpx;
		}
	}

	.pay-box {
		align-items: center;
		padding: 10rpx 30rpx 62rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 162rpx;

		.pay-btn {
			width: 320rpx;
			height: 90rpx;
			color: #fff;
			line-height: 90rpx;
			text-align: center;
			background: #43ABC4;
			border-radius: 14rpx;
		}
	}

	.info-list {
		position: relative;
		padding: 20rpx 0 10rpx;

		.icon-box {
			position: absolute;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
		}
	}
</style>